import React from 'react'
import { NavLink } from 'react-router-dom'

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions} from '../../reducers'
import {actions as ProjectAction} from '../../reducers/project'

import utils from '../../common/utils'
import history from '../../history'
import {get} from '../../axios'
import moment from 'moment'

class PublicDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          revisions: [],
          project: {user:{}},
        }
      }

      componentDidMount() {
        let project_id = utils.getQueryString('project_id')
        this.get_project_detail(project_id)
        this.get_revision_list(project_id)
      }
    
      get_revision_list(project_id) {
        get(`/mem/project-revision/${project_id}`).then(resp => {
          if (resp.success) {
            this.setState({revisions: resp.data})
          }
        })
      }

      get_project_detail(project_id) {
        get(`/mem/project/${project_id}`).then(resp => {
            if (resp.success) {
              this.setState({project: resp.data})
            }
          })
      }

    renderTimeOrWorker(project) {
        //投标中，显示剩余时间
        if (project.status=='pending') {
            let _last = utils.getLastTime(project.expect_at)
            return <div class="time">{_last.overtime?'超':'剩'}<i>{Math.abs(_last.d)}</i>天<i>{Math.abs(_last.h)}</i>小时</div>
        }
        //有执行人显示执行人
        if (project.project_user) {
            return <span>执行者：{project.project_user.user.nickname}</span>
        } 
        return null
    }

    render() {
        const { project } = this.state
        console.log(project)
        return(
            <React.Fragment>
                <div className="details margin">
                    <div className="head">
                        <div class="my-h3">
                            <div class="name">{project.title}</div>
                            <span>{moment(project.created_at).format('ll')}</span>
                        </div>
                        <div className="p1">
                            <span>{utils.formatProjectStatus(project)}</span>
                            <em>{project.category_name}</em>
                        </div>
                        <div className="p2">
                            <span>发布者：{project.user.nickname}</span>
                            {this.renderTimeOrWorker(project)}
                        </div>

                        <div class="tabs">
                            <div className='title'>
                                <a className="active">项目信息
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div className="content-box">
                    <div class="tabs-2">
                            <h3>项目编号：{project.number}</h3>
                            <p>
                            {project.content}
                            </p>
                            {
                                this.state.revisions.map (x => 
                                    <div className='revision' key={x.id}>
                                    <p className='p1'>{x.content}</p>
                                    <p className='p2'><i>{x.user.nickname}</i><i>{moment(x.created_at).format('ll')}</i></p>
                                    </div>
                                )
                            }
                    </div>
                    </div>
                </div>
            </React.Fragment>
        )
    }
}

function mapStateToProps(state) {
    return {
      userInfo: state.user.userInfo
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return  {
    }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(PublicDetail)